<template>
    <div class="radioPlay">
        <p class="topP">
            <i class="iconfont icon-xiala-yuan" @click="back"></i>
            <span class="topText">在路上</span>
        </p>
        <div class="middleText">
            <h4 class="titleOne">爱情的魔力</h4>
            <p class="titleTwo">李之勤</p>
        </div>
        <p class="prompt">小心驾驶，安全为上</p>
        <div class="playBtnBox">
            <i class="iconfont icon-houtui"></i>
            <div class="suspendedBox">
                <i class="iconfont icon-zanting"></i>
            </div>
            <i class="iconfont icon-qianjin"></i>
        </div>
        <i class="iconfont icon-dianzan"></i>
    </div>
</template>

<script>
    export default {
  name: "radioPlay",
  data() {
    return {};
  },
  methods:{
      back(){
          history.back() == history.go(1);
      }
  }
};
</script>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
}
.radioPlay{
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    letter-spacing: 0.09rem;
    overflow: hidden;
    .topP{
        padding-top: 0.5rem;
        .icon-xiala-yuan{
            font-size: 1rem;
            padding-left: 0.5rem;
            vertical-align: middle;
        }
        .topText{
            font-size: 0.5rem;
            padding-left: 3.5rem;
            vertical-align: middle;
        }
    }
    .middleText{
        text-align: center;
        margin-top: 3.5rem;
        .titleOne{
            font-size: 0.85rem;
            font-weight: normal;
            letter-spacing: 0.09rem;
        }
        .titleTwo{
            font-size: 0.7rem;
            padding-top: 0.35rem;
        }
    }
    .prompt{
        font-size: 0.43rem;
        text-align: center;
        padding-top: 1.7rem;
    }
    .playBtnBox{
        width: 100%;
        box-sizing: border-box;
        padding: 0 0.5rem;
        margin: 0 auto;
        margin-top: 0.5rem;
        text-align: center;
        .icon-houtui{
            font-size: 1.7rem;
        }
        .suspendedBox{
            display: inline-block;
            width: 3.5rem;
            height: 3.5rem;
            line-height: 3.5rem;
            border-radius: 50%;
            background: #bd115e;
            text-align: center;
            margin: 1.7rem 1.36rem;
            .icon-zanting{
                font-size: 1.7rem;
            }
        }
        .icon-qianjin{
            font-size: 1.7rem;
        }
    }
    .icon-dianzan{
        font-size: 1.7rem;
        color: #594e53;
        float: right;
        margin-right: 0.35rem;
    }
}
</style>

